<template>
  <el-container style="height: 100vh;"> 
    <el-aside width="220px" style="background-color: #3b82f6;" v-if="isLoggedIn"> 
      <div class="sidebar-menu">
        <div class="menu-top-space"></div>
        <el-button
          type="primary"
          plain
          icon="el-icon-house"
          size="medium"
          @click="handleMenuClick('/home', '首页')"
          style="width: 100%; margin-bottom: 10px; background: #2563eb; color: #fff;"
        >
          首页
        </el-button>

        <!-- 个人中心（可折叠菜单） -->
        <div class="menu-group" style="margin-bottom: 10px;">
          <el-button
            type="primary"
            plain
            icon="el-icon-user"
            size="medium"
            style="width: 100%; background: #2563eb; color: #fff;"
            @click="toggleMenu('personal')"
          >
            个人中心
            <el-icon style="margin-left: 5px;">
              <ArrowDown :style="{ transform: personalMenuOpen ? 'rotate(180deg)' : 'rotate(0)' }" />
            </el-icon>
          </el-button>
          <el-collapse-transition>
            <div v-show="personalMenuOpen">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleMenuClick('/personal-center/edit-password', '修改密码')"
                class="sub-menu-btn"
              >
                修改密码
              </el-button>
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleMenuClick('/personal-center/personal-info', '个人信息')"
                class="sub-menu-btn"
              >
                个人信息
              </el-button>
            </div>
          </el-collapse-transition>
        </div>

        <!-- 管理员管理（可折叠菜单） -->
        <div class="menu-group" style="margin-bottom: 10px;">
          <el-button
            type="primary"
            plain
            icon="el-icon-user"
            size="medium"
            style="width: 100%; background: #2563eb; color: #fff;"
            @click="toggleMenu('admin')"
          >
            管理员管理
            <el-icon style="margin-left: 5px;">
              <ArrowDown :style="{ transform: adminMenuOpen ? 'rotate(180deg)' : 'rotate(0)' }" />
            </el-icon>
          </el-button>
          <el-collapse-transition>
            <div v-show="adminMenuOpen">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleMenuClick('/admin-manage/new-admin-page', '管理员信息')"
                class="sub-menu-btn"
              >
                管理员信息
              </el-button>
            </div>
          </el-collapse-transition>
        </div>

        <!-- 基础数据管理（可折叠菜单）【与个人中心子栏样式统一】 -->
        <div class="menu-group" style="margin-bottom: 10px;">
          <el-button
            type="primary"
            plain
            icon="el-icon-data-line"
            size="medium"
            style="width: 100%; background: #2563eb; color: #fff;"
            @click="toggleMenu('basicData')"
          >
            基础数据管理
            <el-icon style="margin-left: 5px;">
              <ArrowDown :style="{ transform: basicDataMenuOpen ? 'rotate(180deg)' : 'rotate(0)' }" />
            </el-icon>
          </el-button>
          <el-collapse-transition>
            <div v-show="basicDataMenuOpen">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleMenuClick('/basic-data/goods-type-manage', '物品类型管理')"
                class="sub-menu-btn"
              >
                物品类型管理
              </el-button>
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleMenuClick('/basic-data/administrator-audit', '审核拾取-遗失')"
                class="sub-menu-btn"
              >
                审核拾取-遗失
              </el-button>
            </div>
          </el-collapse-transition>
        </div>

        <!-- 失物信息管理（可折叠菜单） -->
        <div class="menu-group" style="margin-bottom: 10px;">
          <el-button
            type="primary"
            plain
            icon="el-icon-delete"
            size="medium"
            style="width: 100%; background: #2563eb; color: #fff;"
            @click="toggleMenu('lost')"
          >
            失物信息管理
            <el-icon style="margin-left: 5px;">
              <ArrowDown :style="{ transform: lostMenuOpen ? 'rotate(180deg)' : 'rotate(0)' }" />
            </el-icon>
          </el-button>
          <el-collapse-transition>
            <div v-show="lostMenuOpen">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleMenuClick('/lost-manage/lost-info', '失物信息详情')"
                class="sub-menu-btn"
              >
                失物信息详情
              </el-button>
            </div>
          </el-collapse-transition>
        </div>

        <!-- 寻物启事管理（可折叠菜单） -->
        <div class="menu-group" style="margin-bottom: 10px;">
          <el-button
            type="primary"
            plain
            icon="el-icon-search"
            size="medium"
            style="width: 100%; background: #2563eb; color: #fff;"
            @click="toggleMenu('seek')"
          >
            寻物启事管理
            <el-icon style="margin-left: 5px;">
              <ArrowDown :style="{ transform: seekMenuOpen ? 'rotate(180deg)' : 'rotate(0)' }" />
            </el-icon>
          </el-button>
          <el-collapse-transition>
            <div v-show="seekMenuOpen">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleMenuClick('/seek-manage/seek-info', '寻物启事详情')"
                class="sub-menu-btn"
              >
                寻物启事详情
              </el-button>
            </div>
          </el-collapse-transition>
        </div>

        <!-- 用户管理（可折叠菜单） -->
        <div class="menu-group" style="margin-bottom: 10px;">
          <el-button
            type="primary"
            plain
            icon="el-icon-user-filled"
            size="medium"
            style="width: 100%; background: #2563eb; color: #fff;"
            @click="toggleMenu('user')"
          >
            用户管理
            <el-icon style="margin-left: 5px;">
              <ArrowDown :style="{ transform: userMenuOpen ? 'rotate(180deg)' : 'rotate(0)' }" />
            </el-icon>
          </el-button>
          <el-collapse-transition>
            <div v-show="userMenuOpen">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleMenuClick('/user-manage/user-info', '用户信息')"
                class="sub-menu-btn"
              >
                用户信息
              </el-button>
            </div>
          </el-collapse-transition>
        </div>
      </div>
    </el-aside>

    <!-- 未登录时，直接显示路由内容（登录页） -->
    <el-container v-else> 
      <el-main style="display: flex; justify-content: center; align-items: center; height: 100vh;">
        <router-view />
      </el-main>
    </el-container>

    <el-container v-if="isLoggedIn"> 
      <el-header style="background: #3b82f6; color: #fff; display: flex; 
                       align-items: center; justify-content: center;
                       padding: 0 20px; position: relative;
                       height: 90px;">
        <h2 class="system-title">校园失物招领系统</h2>
        <div style="position: absolute; right: 20px;">
          <span>管理员 admin</span>
          <el-button 
            type="text" 
            @click="handleLogout" 
            style="color: #fff; margin-left: 10px;"
          >
            退出登录
          </el-button>
        </div>
      </el-header>

      <el-main>
        <el-breadcrumb separator="/" style="margin-bottom: 10px;">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="currentBreadcrumb">{{ currentBreadcrumb }}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { 
  House, User, DataLine, Delete, Search, UserFilled, ArrowDown 
} from '@element-plus/icons-vue'

const router = useRouter()
const currentBreadcrumb = ref('')
const isLoggedIn = ref(false) 

// 各菜单组的展开状态
const personalMenuOpen = ref(false)
const adminMenuOpen = ref(false)
const basicDataMenuOpen = ref(false)
const lostMenuOpen = ref(false)
const seekMenuOpen = ref(false)
const userMenuOpen = ref(false)

// 存储所有菜单组的引用，便于批量操作
const allMenuGroups = {
  personal: personalMenuOpen,
  admin: adminMenuOpen,
  basicData: basicDataMenuOpen,
  lost: lostMenuOpen,
  seek: seekMenuOpen,
  user: userMenuOpen
}

// 切换菜单展开状态的函数（优化版）
const toggleMenu = (menuName) => {
  // 获取当前菜单组的引用
  const targetMenu = allMenuGroups[menuName]
  
  // 如果目标菜单未定义，直接返回
  if (!targetMenu) return
  
  // 关闭所有其他菜单组
  Object.keys(allMenuGroups).forEach(key => {
    if (key !== menuName) {
      allMenuGroups[key].value = false
    }
  })
  
  // 切换目标菜单的展开状态
  targetMenu.value = !targetMenu.value
}

watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    isLoggedIn.value = newPath !== '/login' 
    
    // 路由变化时关闭所有菜单
    personalMenuOpen.value = false
    adminMenuOpen.value = false
    basicDataMenuOpen.value = false
    lostMenuOpen.value = false
    seekMenuOpen.value = false
    userMenuOpen.value = false
  },
  { immediate: true }
)

// 点击菜单项时不关闭菜单，仅在点击其他菜单组时关闭
const handleMenuClick = (path, title) => {
  router.push(path)
  currentBreadcrumb.value = title
}

const handleLogout = () => {
  localStorage.removeItem('isLoggedIn') 
  isLoggedIn.value = false
  router.push('/login') 
}
</script>

<style scoped>
.sidebar-menu {
  padding: 10px;
}

.menu-top-space {
  height: 80px; 
}

.system-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.el-header {
  /* 配合 flex 垂直居中，替代原 line-height */
}

.el-button--primary.is-plain {
  border: none;
}
.el-button--primary.is-plain:hover {
  background: #2563eb;
  color: #fff;
}

/* 菜单组样式 */
.menu-group {
  width: 100%;
}

/* 子菜单按钮统一样式：确保与个人中心子栏完全一致 */
.sub-menu-btn {
  width: 100% !important; 
  background: #1d4ed8 !important; 
  color: #fff !important; 
  margin: 0 !important; 
  padding: 6px 0 !important; 
  border: none !important;
}
.sub-menu-btn:hover {
  background: #173faa !important; 
}

/* 箭头动画 */
.el-icon svg {
  transition: transform 0.3s ease;
}
</style>